<template>
  <!--模板-->
  <hr>

  <div style="width: 300px;">
    <!--
    <nf-text2 :model="model" :meta="meta1.meta" v-bind="meta1.props"  >
      <option value="666">外面设置的</option>
      <template #prepend>http://</template>
      <template #append>.com</template>
      <template #data="{user, age}">欢迎{{user}}</template>
    </nf-text2>-->

  </div>
  <hr>
  <el-row :gutter="20" v-if="true">
    <el-col :span="14">
      <nf-input :model="model" :meta="itemMeta[101].meta" v-bind="itemMeta[101].props" ></nf-input>
      <nf-input :model="model" :meta="itemMeta[100].meta" v-bind="itemMeta[100].props" ></nf-input>
      <nf-input :model="model" :meta="itemMeta[102].meta" v-bind="itemMeta[102].props" ></nf-input>
      <nf-input :model="model" :meta="itemMeta[103].meta" v-bind="itemMeta[103].props" ></nf-input>
      <nf-input :model="model" :meta="itemMeta[104].meta" v-bind="itemMeta[104].props" ></nf-input>
      <nf-url :model="model" :meta="itemMeta[105].meta" v-bind="itemMeta[105].props" ></nf-url>
      <nf-input :model="model" :meta="itemMeta[106].meta" v-bind="itemMeta[106].props" ></nf-input>
      <nf-autocomplete :model="model" :meta="itemMeta[107].meta" v-bind="itemMeta[107].props" ></nf-autocomplete>
      <br>
      <nf-input :model="model" :meta="itemMeta[108].meta" v-bind="itemMeta[108].props" ></nf-input>
      <br>
      <nf-number :model="model" :meta="itemMeta[110].meta" v-bind="itemMeta[110].props" ></nf-number>
      <br>
      <nf-number :model="model" :meta="itemMeta[111].meta" v-bind="itemMeta[111].props" ></nf-number>
      <nf-number :model="model" :meta="itemMeta[112].meta" v-bind="itemMeta[112].props" ></nf-number>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[120].meta" v-bind="itemMeta[120].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[121].meta" v-bind="itemMeta[121].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[122].meta" v-bind="itemMeta[122].props" ></nf-date-picker>
      <br>
      week: <nf-week :model="model" :meta="itemMeta[123].meta" v-bind="itemMeta[123].props" ></nf-week>
      <input v-model="myWeek" type="week"/>{{ myWeek }}
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[124].meta" v-bind="itemMeta[124].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[128].meta" v-bind="itemMeta[128].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[125].meta" v-bind="itemMeta[125].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[126].meta" v-bind="itemMeta[126].props" ></nf-date-picker>
      <br>
      <nf-date-picker :model="model" :meta="itemMeta[127].meta" v-bind="itemMeta[127].props" ></nf-date-picker>
      <br>
      <nf-time-picker :model="model" :meta="itemMeta[130].meta" v-bind="itemMeta[130].props" ></nf-time-picker>
      <br>
      <nf-time-picker :model="model" :meta="itemMeta[131].meta" v-bind="itemMeta[131].props" ></nf-time-picker>
      <br>
      <nf-time-select :model="model" :meta="itemMeta[132].meta" v-bind="itemMeta[132].props" ></nf-time-select>
      <br>
      <nf-time-select :model="model" :meta="itemMeta[133].meta" v-bind="itemMeta[133].props" ></nf-time-select>
      <br>
      <nf-switch :model="model" :meta="itemMeta[150].meta" v-bind="itemMeta[150].props" ></nf-switch>
      <br>
      <nf-switch :model="model" :meta="itemMeta[151].meta" v-bind="itemMeta[151].props" ></nf-switch>
      <br>
      <nf-checkboxs :model="model" :meta="itemMeta[152].meta" v-bind="itemMeta[152].props" ></nf-checkboxs>
      <br>
      <nf-checkboxs :model="model" :meta="itemMeta[153].meta" v-bind="itemMeta[153].props" ></nf-checkboxs>
      <br>
      <nf-select :model="model" :meta="itemMeta[160].meta" v-bind="itemMeta[160].props" ></nf-select>
      <br>
      <nf-select :model="model" :meta="itemMeta[161].meta" v-bind="itemMeta[161].props" ></nf-select>
      <br>
      <nf-select :model="model" :meta="itemMeta[162].meta" v-bind="itemMeta[162].props" ></nf-select>
      <br>
      <nf-select :model="model" :meta="itemMeta[163].meta" v-bind="itemMeta[163].props" ></nf-select>
      <br>
      <nf-select-cascader :model="model" :meta="itemMeta[164].meta" v-bind="itemMeta[164].props" ></nf-select-cascader>
      <br>
      <nf-select :model="model" :meta="itemMeta[165].meta" v-bind="itemMeta[165].props" ></nf-select>
      <br>
      <nf-select :model="model" :meta="itemMeta[166].meta" v-bind="itemMeta[166].props" ></nf-select>
      <br>
    </el-col>
    <el-col :span="10">
      model： 
      <show-object :obj="model"></show-object>
    </el-col>
  </el-row>
</template>

 
<script setup lang="ts">
  import { reactive, ref, defineComponent  } from 'vue'

  // import nfText2 from './20-text.vue'
  import showObject from '../../show-object.vue'

  import { AllFormItem } from '../../../../lib-elp/main'

  // import son from './11-item-son.vue'

  import json from './form.json'

  import {
    // comp,
    BaseComp
  } from './comp'


  const comp = {
    template: '我是模板：{{foo}}',
    props:{
      name: String
    },
    setup(props: object) {
      const foo = ref('我是对象')
      console.log('对象组件的 props', props)

      return {
        foo
      }
    }
  }

  const foo1 = () => {
    return new Date().valueOf()
  }
  const foo11 = () => {
    console.log('foo11被调用')
    return '123'

  }
  const foo2 = {
    time: new Date().valueOf()
  }

  const foo3 = ref(0)

  const foo4 = {
    aa: foo2
  }

  const isShow = ref(false)

  const change1 = () => {
    foo3.value = new Date().valueOf()
    foo2.time  = new Date().valueOf()

    comp.template = '我被改了。' + new Date().valueOf()
    isShow.value != isShow.value
  }

  /**
   *   函数1： {{foo1()}}<br>
  函数11： {{foo11()}}<br>
  r e f：{{foo3}}<br> 
    对象：{{foo2.time}}<br>
    对象：{{foo4.aa}}<br>
    <el-button type="" @click="change1">变更</el-button>
    <component :is="comp" name="aaa"></component><br> 
    <component :is="new BaseComp()" name="ccc"></component>
   */
  // console.log(json)

  const { itemMeta } = json

  const {
    // 文本类
    nfInput,
    nfUrl,
    nfAutocomplete,
    // 数字 滑块 评分
    nfNumber,
    // 日期综合  年周
    nfDatePicker,
    // nfDate,
    // nfDatetime,
    // nfMonth,
    // nfYear,
    nfWeek,
    // nfDates,
    // 时间
    nfTimePicker,
    nfTimeSelect,
    // 上传文件 图片 视频
    nfFile,
    nfPicture,
    nfVideo,
    // 开关  勾选 多选组 单选组
    nfSwitch,
    // nfCheckbox,
    nfCheckboxs,
    // nfRadios,
    // 下拉
    nfSelect, // 160 单选
    // nfSelectGroup, // 162 分组=
    nfSelectCascader, // 164 联动
    // nfSelectTree // 165 树
    /*
    */
  } = AllFormItem

  const model = reactive({
    kind: '',
    area: '',
    text: '33333',
    pwd: '',
    Email: '',
    Tel: '123123123',
    url: '',
    Search: '',
    Autocomplete: '',
    Color: '',
    number1: 0,
    number2: 0,
    number3: 0,
    date: '',
    datetime: '',
    month: '',
    week: '',
    year: '',
    dateRange1:  [],
    dateRange2:  [],
    monthR1_monthR2: [],
    dateMore:  [],
    time1: '',
    time2:  [],
    time3: '',
    time4: '',
    file: '',
    check1: '',
    check2: '',
    checks:  [],
    radio: '',
    select1: '',
    selects:  [],
    selGroup1: '',
    selGroup2:  [],
    selCas1_selCas2_selCas3: [],
    treeA1: '',
    treeB1:  []
  })

  const myWeek = ref('')

  const meta1 = reactive({
    meta: {
      columnId: 101,
      colName: 'text',
      label: '文本',
      controlType: 101,
      isClear: false,
      defValue: '文本33',
      colCount: 1,
      delay: 550,
    },
    props: {
      clearable: true,
      title: '文本',
      placeholder: '文本',
      // 'prefix-icon': 'Star',
      // 'suffix-icon': 'Star'
    }
  })
 

</script>